const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

let { CleanWebpackPlugin } = require("clean-webpack-plugin");

//提取css代码到一个单独的文件中去
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 导入Vue-loader的插件信息
const { VueLoaderPlugin } = require("vue-loader");

//JS代码手动挡
const TerserPlugin = require("terser-webpack-plugin");

//配置css的压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//导入压缩的包
const CompressionPlugin = require("compression-webpack-plugin");

//commonJS的语法的进行抛出，插件loader， require方式导入
module.exports = {
    //入口文件
    entry: "./src/main.js",

    //开发环境配置
    devServer: {
        port: 8000,
        open: true,//打开
        // proxy:{

        // }
    },
    //配置别名
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    //出口文件
    output: {
        //打包后的文件
        filename: "js/[name]_[hash:8].js",
        //打包的输出路径
        path: path.resolve(__dirname, 'dist'),
    },
    //loader
    module: {
        rules: [
            {
                test: /\.css$/i,//配置css结尾的文件
                // 从右到左依次执行，先写css-loader，再写style-loader
                // use:['style-loader','css-loader'],//指定对应处理的loader信息
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, 'css-loader'],//指定对应处理的loader信息
            },
            //配置支持图片信息
            {
                test: /\.(gif|jpe?g|png)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            //默认关闭模块化的操作
                            esModule: false,
                            name: '[name]_[hash:10].[ext]',
                            outputPath: 'images/'
                        }
                    },
                    {
                        loader: "image-webpack-loader",
                        options: {
                            // //压缩jpeg的图片
                            mozjpeg: {
                                progressive: true,
                                quality: 25
                            },
                            // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            },
            //识别Vue的文件,配置对应的loader信息
            {
                test: /\.vue$/i,
                loader: 'vue-loader'
            }
        ]
    },
    //plugin插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "[name][hash:10].html",
            minify: {
                minifyCSS: false, // 是否压缩css
                collapseWhitespace: true, // 是否折叠空格
                removeComments: true // 是否移除注释
            }
        }),
        //每次打包都清除文件信息
        new CleanWebpackPlugin(),

        //编译后文件的输出目录
        new MiniCssExtractPlugin({
            filename: "css/[name]_[hash:8].css",
        }),

        //实例化Vue-loader的构造函数
        new VueLoaderPlugin()
    ],
    //打包模式 -- 开发模式的区别
    mode: "development",

    //配置代码的优化项
    optimization: {
        usedExports:true,
        minimize: true,
        //配置代码分割的逻辑
        splitChunks:{
            chunks:'all',//所有的
            minSize:20000,
            maxSize:300000,
        },
        //配置所有优化的插件选项
        minimizer: [
            //js代码压缩
            new TerserPlugin({
                extractComments: true,
                parallel: true,// 电脑cpu核数-1
                terserOptions: {
                    mangle: true,
                    compress: true,
                    keep_fnames: true,
                }
            }),
            //css代码压缩配置
            new CssMinimizerPlugin({
                parallel: true,
            }),

            //文件的压缩的操作
            new CompressionPlugin({
                test: /\.css|js$/,  // 哪些文件需要压缩
                threshold: 5000, // 设置文件多大开始压缩
                minRatio: 0.5, // 至少压缩的比例
                algorithm: "gzip", // 采用的压缩算法
            })
        ]
    }
}